<html>
<head>
<title>Stereo Album Art</title>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: black;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 32pt;
	text-align: center;
}
img {
	display: block;
	margin: 0 auto;
	height: 100%;
	border: none;
}
#current {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 5ex;
	-moz-opacity: 0.9;
	-webkit-opacity: 0.9;
	opacity: 0.9;
	background-color: black;
	color: white;
	padding: 1ex 0;
	display: none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script type="text/javascript" src="/ajax.js"></script>
<script type="text/javascript" src="/spotlight/views.js"></script>
<script type="text/javascript" src="/spotlight/daap.js"></script>
<script type="text/javascript" src="dacp.js"></script>
</head>
<body>
<img id="albumart" />
<div id="current">
	<div id="title"></div>
	<div id="artist"></div>
</div>

<script type="text/javascript">

var dacp = new DACP("");
var revision = 0;

function announce() {
	setTimeout(function () { $("#current").fadeIn(2000); }, 2000);
	setTimeout(function () { $("#current").fadeOut(3000); }, 10000);
}

dacp.playstatusupdate = function (update) {

	if (revision && update.revision == revision) {
		return;
	}

	revision = update.revision;

	dacp.request("/ctrl-int/1/playstatusupdate?revision-number="+update.revision);
	
	document.getElementById("albumart").src = "/ctrl-int/1/nowplayingartwork?revision-number="+update.revision;

	if (update.title) {
		document.getElementById("title").innerHTML = update.title;
	}

	if (update.artist) {
		document.getElementById("artist").innerHTML = update.artist;
	}

	document.title = update.title + " - " + update.artist;

	announce();
};

dacp.request("/ctrl-int/1/playstatusupdate");

</script>
</body>
</html>